<template>
  <div class="uv-popup" @touchmove.prevent>
    <overLay :overlay="overlay" :show="modelValue" @click="closePop" />
    <div
      v-show="modelValue"
      :class="uvClass"
      :style="{ height: height, backgroundColor: bgColor, padding: padding ? '10px' : 'none' }"
    >
      <div class="uv-popup-content">
        <div class="uv-popup-content-top" v-if="title || close">
          <div v-if="title" class="uv-popup-content-title">
            {{ title }}
          </div>
          <div v-if="close" class="uv-popup-content-close">
            <div @click="closeEvent">
              <image class="icon-class" :src="closeIcon" />
            </div>
          </div>
        </div>
        <div class="uv-popup-content-item">
          <slot />
        </div>
        <div v-if="action" class="uv-popup-content-button">
          <div class="uv-popup-content-button-cancle" @click.stop="cancleEvent">
            {{ leftName }}
          </div>
          <div class="uv-popup-content-button-confim" @click.stop="confimEvent">
            {{ rightName }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import overLay from './overlay'
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  position: {
    type: String,
    default: 'bottom',
  },
  bgColor: {
    type: String,
    default: '#fff',
  },
  round: {
    type: Boolean,
    default: false,
  },
  padding: {
    type: Boolean,
    default: true,
  },
  overlay: {
    type: Boolean,
    default: true,
  },
  clickOverlayClose: {
    type: Boolean,
    default: true,
  },
  height: {
    type: String,
    default: 'auto',
  },
  action: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '',
  },
  close: {
    type: Boolean,
    default: false,
  },
  leftName: {
    type: String,
    default: '取消',
  },
  rightName: {
    type: String,
    default: '确定',
  },
})
const emit = defineEmits(['update:modelValue', 'cancle', 'confim', 'close'])
const uvClass = computed(() => {
  return [
    'uv-popup-wrap',
    props.position ? `uv-popup-${props.position}` : '',
    props.round ? `uv-popup-${props.position}-round` : '',
  ]
})

const closePop = () => {
  if (props.clickOverlayClose) {
    emit('update:modelValue', false)
  }
}
const cancleEvent = () => {
  emit('cancle')
  emit('update:modelValue', false)
}
const confimEvent = () => {
  emit('confim')
}
const closeEvent = () => {
  emit('close')
  emit('update:modelValue', false)
}

const closeIcon =
  ''
</script>

<style lang="scss" scoped>
.uv-popup {
  .uv-popup-bottom {
    bottom: 0;
    left: 0;
    width: 100%;
  }
  .uv-popup-bottom-round {
    border-radius: 16px 16px 0 0;
  }
  .uv-popup-top {
    top: 0;
    left: 0;
    width: 100%;
  }
  .uv-popup-top-round {
    border-radius: 0 0 16px 16px;
  }
  .uv-popup-center {
    top: 50%;
    left: 50%;
    min-width: 50px;
    min-height: 50px;
    transform: translate(-50%, -50%);
  }
  .uv-popup-center-round {
    border-radius: 16px;
  }
  .uv-popup-left {
    top: 0;
    left: 0;
    max-width: 70%;
    min-height: 100%;
  }
  .uv-popup-left-round {
    border-radius: 0 16px 16px 0;
  }
  .uv-popup-right {
    top: 0;
    right: 0;
    max-width: 70%;
    min-height: 100%;
  }
  .uv-popup-right-round {
    border-radius: 16px 0 0 16px;
  }
  .uv-popup-wrap {
    position: fixed;
    z-index: 2;
    overflow-y: auto;
    max-height: 100%;
    transition: transform 0.3s;
    .uv-popup-content {
      .uv-popup-content-top {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 30px;
        .uv-popup-content-title {
          padding: 0;
          font-size: 16px;
          font-weight: 700;
          color: #323233;
        }
        .uv-popup-content-close {
          position: absolute;
          top: 0;
          right: 0;
        }
      }
      .uv-popup-content-button {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding-top: 10px;

        @mixin base-button() {
          padding: 12px 45px;
          font-size: 14px;
          border-radius: 6px;
          text-align: center;
          white-space: nowrap;
          box-shadow: rgb(0 0 0 / 15%) 0 2px 8px;
        }
        .uv-popup-content-button-confim {
          @include base-button;

          color: #ffffff;
          background-color: #07c160;
        }
        .uv-popup-content-button-cancle {
          @include base-button;

          margin-right: 10px;
          color: #1fa45d;
          background-color: #f0f0f0;
        }
      }
    }
  }
  .uv-popup-slide-top-enter-active,
  .uv-popup-slide-center-enter-active,
  .uv-popup-slide-left-enter-active,
  .uv-popup-slide-right-enter-active,
  .uv-popup-slide-bottom-enter-active {
    transition-timing-function: ease-out;
  }
  .uv-popup-slide-top-leave-active,
  .uv-popup-slide-center-enter-active,
  .uv-popup-slide-left-leave-active,
  .uv-popup-slide-right-leave-active,
  .uv-popup-slide-bottom-leave-active {
    transition-timing-function: ease-in;
  }
  .uv-popup-slide-top-enter-from,
  .uv-popup-slide-top-leave-active {
    transform: translate3d(0, -100%, 0);
  }
  .uv-popup-slide-right-enter-from,
  .uv-popup-slide-right-leave-active {
    transform: translate3d(100%, 0, 0);
  }
  .uv-popup-slide-bottom-enter-from,
  .uv-popup-slide-bottom-leave-active {
    transform: translate3d(0, 100%, 0);
  }
  .uv-popup-slide-left-enter-from,
  .uv-popup-slide-left-leave-active {
    transform: translate3d(-100%, 0, 0);
  }
  .uv-popup-slide-center-enter-from,
  .uv-popup-slide-center-leave-active {
    opacity: 0;
  }
}
.icon-class {
  width: 20px;
  height: 20px;
}
</style>
